var ToSendUserno;//接收人编号
var tosendname;
var websocket = null;
var userId;//当前用户
var headPosition;//头像
//添加messageId自定义事件监听
window.addEventListener('messageId',function(event){
	ToSendUserno = event.detail.tosendId;
	userId = event.detail.userId;
	tosendname = event.detail.tosendname;
	ToSendHead = event.detail.ToSendHead;
	// alert(ToSendUserno+"oooo"+userId);
	$("#Tosend_user").html(tosendname);
	//判断当前浏览器是否支持WebSocket
	if ('WebSocket' in window) {
		websocket = new WebSocket("ws://192.168.43.166:8080/appWeb/websocket/"+userId);
	}
	else {
		alert('当前浏览器不支持websocket')
	}
	$("#msg-list").empty();
	// 获取两个用户之间的聊天消息
	$.ajax({
		url:backend_url + "/me/gl.action",
		data:{
			"sendId":userId,
			"acceptId":ToSendUserno
		},
		type:"POST",
		dataType:"json",
		success:function(data){
			var msg_list = data.b;
			// sendId;发送者即当前用户id
			// acceptId;接收者
			for(i=0;i<msg_list.length;i++){
				// 判断是当前用户发的消息就加载right_div；否则加载left_div
				if(msg_list[i].sendId != userId){
					var left_div = `<div class="msg-item">
									<img class="left_img" src=`+img_url+ToSendHead+` onerror="this.onerror='';src='../images/person.png' " alt="头像">
									<div class="msg-content">
										<div class="msg-content-inner">`+msg_list[i].messageContent+`</div>
										<div class="msg-content-arrow"></div>
									</div>
									<div class="mui-item-clear"></div>
								</div>`;
					$("#msg-list").append(left_div);
				}else{
					var right_div =  `<div class="msg-item msg-item-self">
									<img class="right_img" src=`+img_url+headPosition+` onerror="this.onerror='';src='../images/person.png' " alt="头像">
									<div class="msg-content">
										<div class="msg-content-inner">`+msg_list[i].messageContent+`</div>
										<div class="msg-content-arrow"></div>
									</div>
									<div class="mui-item-clear"></div>
								</div>`;
					$("#msg-list").append(right_div);
				}
			}
		},
		error:function(er){
		}
	});
	var now=getNowFormatDate();//获取当前时间
	$("#date").html(now);
	//连接发生错误的回调方法
	websocket.onerror = function () {
		// setMessageInnerHTML("WebSocket连接发生错误!请检查网络连接");
	};
	//连接成功建立的回调方法
	websocket.onopen = function () {
		// setMessageInnerHTML("WebSocket连接成功");
	}
	//接收到消息的回调方法
	websocket.onmessage = function (event) {
		setMessageInnerHTML(event.data);
	}
	//连接关闭的回调方法
	websocket.onclose = function () {
		// setMessageInnerHTML("WebSocket连接关闭");
	}
	//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
	window.onbeforeunload = function () {
		closeWebSocket();
	}
	//关闭WebSocket连接
	function closeWebSocket() {
		websocket.close();
	}
	// 当前用户信息
	$.ajax({
		url:backend_url + "/usot/sum.action",
		data:{
			"id":userId
		},
		type:"POST",
		dataType:"json",
		success:function(data){
			if(data.a){
				headPosition = data.a.headPosition;
			}
		},
		error:function(er){
		}
	});
});
//发送消息
$("#send").on("click",function(){
	var message = $("#msg_text").val();//要发送的消息内容
	message2=message+"|"+ToSendUserno;//将要发送的信息和内容拼起来，以便于服务端知道消息要发给谁
	websocket.send(message2);
	var now=getNowFormatDate();
	var div =  `<div class="msg-item  msg-item-self">
					<img class="right_img" src=`+img_url+headPosition+` onerror="this.onerror='';src='../images/person.png' " alt="头像">
					<div class="msg-content">
						<div class="msg-content-inner">`+now+`</br/>`+message+`</div>
						<div class="msg-content-arrow"></div>
					</div>
					<div class="mui-item-clear"></div>
				</div>`
	$("#msg-list").append(div);
	$("#msg_text").val("");
	send_msg(message);
});
// 用户发送消息时插入表中
function send_msg(message){
	$.ajax({
		url:backend_url + "/me/sm.action",
		data:{
			"messageContent":message,//;发送的内容
			"sendId":userId,//发送者id
			"acceptId":ToSendUserno//接收者id
		},
		type:"POST",
		dataType:"json",
		success:function(data){
		},
		error:function(er){
		}
	});
}
//将消息显示在网页上
function setMessageInnerHTML(sendMessage) {
	// document.getElementById('message').innerHTML += sendMessage + '<br/>';
	var div = `<div class="msg-item">
					<img class="left_img" src="../images/logo.png" onerror="this.onerror='';src='../images/person.png' " alt="头像">
					<div class="msg-content">
						<div class="msg-content-inner">`+sendMessage+`</div>
						<div class="msg-content-arrow"></div>
					</div>
					<div class="mui-item-clear"></div>
				</div>`;
	$("#msg-list").append(div);
}
//获取当前时间
function getNowFormatDate() {
	var date = new Date();
	var seperator1 = "-";
	var seperator2 = ":";
	var month = date.getMonth() + 1;
	var strDate = date.getDate();
	if (month >= 1 && month <= 9) {
		month = "0" + month;
	}
	if (strDate >= 0 && strDate <= 9) {
		strDate = "0" + strDate;
	}
	var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
			+ " " + date.getHours() + seperator2 + date.getMinutes()
			+ seperator2 + date.getSeconds();
	return currentdate;
}